<template>
  <div class="shop">
    <!-- <el-button-group>
      <el-button @click="changeStatus(1)">全部</el-button>
      <el-button @click="changeStatus(7)">近7天</el-button>
      <el-button @click="changeStatus(15)">近15天</el-button>
      <el-button @click="changeStatus(30)">近30天</el-button>
    </el-button-group> -->

    <el-button size="mini" type="primary" @click="exportDisRecordData">导出数据</el-button>
    <!--搜索-->
    <div class="search">
           <el-date-picker v-model="form.start_time"
        type="date"
        class="picker"
        style="width:142px"
        value-format="yyyy-MM-dd"
        size='mini'
        placeholder="选择开始时间"></el-date-picker>——
        <el-date-picker v-model="form.end_time"
        type="date"
        class="picker"
        style="width:142px;margin-right:12px;margin-left:-4px;"
        value-format="yyyy-MM-dd"
        size='mini'
        placeholder="选择结束时间"></el-date-picker>
      <el-select v-model="form.status" placeholder="提现状态" size="mini" style="width:120px;margin-right:12px;">
        <el-option label="全部" value="0"></el-option>
        <el-option label="申请中" value="1"></el-option>
        <el-option label="已审核" value="2"></el-option>
        <el-option label="已驳回" value="3"></el-option>
      </el-select>
      <el-input class="input" size='mini' v-model="form.keywords" placeholder="输入提现用户手机号搜索" clearable></el-input>
      <el-button type="primary" @click="searchShop" size='mini'>搜索</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      class="shop_table_list"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="createTime" label="提现时间" width="180"></el-table-column>
      <el-table-column label="提现银行|编号" width="240">
        <template slot-scope="scope">
          <p class="account" v-if="scope.row.withdrawType == 1">
            {{scope.row.withdrawTypeText}} | {{scope.row.withdrawAccount}}
            <el-popover placement="bottom-end" width="270" trigger="hover">

              <el-row>
                <el-col :span="6">账户类型:</el-col>
                <el-col :span="16">个人支付宝账户</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">收款账户:</el-col>
                <el-col :span="16">{{scope.row.withdrawAccount}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">收款名称:</el-col>
                <el-col :span="16">{{scope.row.memberRealName}}</el-col>
              </el-row>

              <i class="el-icon-info record_info" slot="reference" @click="showInfoDetail"></i>
            </el-popover>
          </p>

          <p class="account" v-if="scope.row.account_type == 5">
            个人账户 | {{scope.row.number}}
            <el-popover style='background-color:red;' placement="bottom-end" width="270" trigger="hover">
              <el-row>
                <el-col :span="6">收款银行:</el-col>
                <el-col :span="16">{{scope.row.alipay_account}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">开户行:</el-col>
                <el-col :span="16">{{scope.row.alipay_account}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">收款账户:</el-col>
                <el-col :span="16">{{scope.row.withdrawAccount}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">收款名称:</el-col>
                <el-col :span="16">{{scope.row.memberRealName}}</el-col>
              </el-row>
              <i class="el-icon-info record_info" slot="reference" @click="showInfoDetail"></i>
            </el-popover>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="提现金额（元）" width="120"></el-table-column>
      <el-table-column  label="代扣税率" width="120">
        <template slot-scope="scope">
          <p>{{scope.row.rate * 100}}%</p>
        </template>
      </el-table-column>
      <el-table-column prop="actualAmount" label="到账金额"></el-table-column>
      <el-table-column prop="memberName" label="姓名"></el-table-column>
      <el-table-column label="提现人|小店" width="210">
        <template slot-scope="scope">{{scope.row.name}}| {{scope.row.memberName}}</template>
      </el-table-column>
      <el-table-column label="状态" prop="statusText">
        <!-- <template slot-scope="scope">
          <p v-if="scope.row.status == 0">审核中</p>
          <p v-if="scope.row.status == 1">已审核</p>
          <p v-if="scope.row.status == 2" class="refund_info">已驳回</p>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == 1"
            size="mini"
            type="danager"
            @click="openrecordDetail(scope.row.id)"
          >审核</el-button>
          <el-button
            v-else
            size="mini"
            type="danager"
            @click="openrecordDetail(scope.row.id)"
          >查看</el-button>
          <!-- <el-button
            v-if="scope.row.status == 2"
            size="mini"
            type="danager"
            @click="openrecordDetail(scope.row.id)"
          >查看</el-button> -->
        </template>
      </el-table-column>
    </el-table>

      <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="form.pageNum"
          :page-size="form.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

       <jdialog title="提现信息详情" :visible.sync="isEditDiscount" width="600px">
         <discount-detail :visible="isEditDiscount" :currentId="currentId" @close="isShowRecordDetail = false" @cancelShow="cancelShowDiscountDetail"></discount-detail>
    </jdialog>
  </div>
</template>

<script>
import discountDetail from './discout_detail'
import {withdrawList} from '@/api/finance';
import { API_BASE_URL } from "@/config";
export default {
  components:{
    discountDetail
  },
   name:'discount',
  data() {
    return {
      form:{
        keywords:'',
        day:'',
         pageNum:1,
         pageSize:20,
         status:'',
         start_time:'',
         end_time:'',
      },
      currentId:'',
      isEditDiscount:false,

      tableData: [],
      total:0,
    };
  },
  created() {
    // console.log("1111111111111111111111111111111")
  },
  mounted(){
   console.log(this.form)
     this.getWithDrawalListData()
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    //导出数据
    exportDisRecordData () {
        this.getwithdrawExportData()
    },
    // changeStatus(type) {
    //   if(type === 1){
    //     this.form.day = ''
    //   }else{
    //     this.form.day = type
    //   }

    //   this.getWithDrawalListData();
    // },
    cancelShowDiscountDetail(){
     this.isEditDiscount = false;
     this.getWithDrawalListData()
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.pageChange(1);
    },
    pageChange(page) {
      this.form.page = page;
      this.getWithDrawalListData();
    },
    searchShop() {
      //根据关键词搜索
      this.getWithDrawalListData();
    },
    showInfoDetail() {

    },
    openrecordDetail(id) {
      this.isEditDiscount = true;
      this.currentId = id;
    },

    //获取提现列表数据
    async getWithDrawalListData(){
      console.log(this.form)
      // if(this.form.status == 0){
      //   this.form.status = ''
      // }
      // if(this.form.start_time == null){
      //   this.form.start_time =''
      // }
      // if(this.form.end_time == null){
      //   this.form.end_time =''
      // }
      let res  = await withdrawList(this.form)

      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    //导出数据
    async getwithdrawExportData() {
      if(this.form.status == 0){
        this.form.status = ''
      }
      if(this.form.start_time == null){
        this.form.start_time =''
      }
      if(this.form.end_time == null){
        this.form.end_time =''
      }

      let res = await withdrawExport(this.form)
      if(res.code === 200){
         window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data.download_token}`
        );
      }else{
        this.$message.error(res.message)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .shop_table_list {
    margin-top: 20px;
  }
  .popover_info p{
    color: red;
    font-size: 14px;
  }
  .refund_info {
    color: #f4222d;
  }

  .search {
    float: right;
    .input {
      width: 180px;
    }

    .addBtn {
      position: absolute;
      right: 50px;
      top: 20px;
    }
  }
  .pagination {
    float: right;
  }
}
</style>
